<template>
  <common-search
    :show-item="2"
    :col-layout="{ xxl: 6, xl: 8, lg: 8, md: 12, sm: 24, xs: 24 }"
    v-model="query"
    :formItems="formItems"
    @search="search"
    @reset="reset"
  ></common-search>
  <a-button type="primary" @click="add" v-modulePerm="['warehouse:add']">
    <template #icon>
      <PlusOutlined />
    </template>
    新增
  </a-button>
  <a-button
    type="primary"
    :loading="exportLoading"
    @click="exports"
    v-modulePerm="['warehouse:export']"
    style="margin-left: 10px"
  >
    <template #icon> </template>
    导出
  </a-button>
  <a-button
    type="primary"
    @click="imports"
    v-modulePerm="['warehouse:import']"
    style="margin-left: 10px"
  >
    <template #icon> </template>
    上传
  </a-button>
  <common-table
    :customFilterDropdown="true"
    :columns="columns"
    :dataSource="dataList"
    v-model:localPagination="page"
    @paginationChange="onPageChange"
    v-model:loading="loading"
    :rowKey="(record) => record.id"
    :scroll="{ x: 'max-content' }"
    :slots="['action']"
  >
    <template #action="{ record }">
      <a @click="handleEdit(record)" v-if="modulePerm(['warehouse:edit'])"
        >编辑</a
      >
      <!-- <a-dropdown>
        <a @click.prevent>更多 <DownOutlined /></a>
        <template #overlay>
          <a-menu>
            <a-menu-item  v-if="modulePerm(['warehouse:edit'])">
              <a @click="handleEdit(record)">编辑</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="handleDetail(record)">详情</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown> -->
    </template>
  </common-table>
  <EditForm
    :showDetail="showDetail"
    :edit-form="editForm"
    :rules="addRules"
    :form-item="formItem"
    @close="closeEdit"
    @submit="submitEdit"
    :record="baseData"
  />
  <AddForm
    :add-form="addForm"
    :rules="addRules"
    @close="closeAdd"
    :form-item="formItem"
    @submit="submitAdd"
  />
  <upload-file
    :type="'commPost'"
    :url="'/config/wayfair/import_wayfair_warehouse'"
    :method="'post'"
    :title="'导入'"
    ref="upFile"
    @search="search"
  >
    <template #template>
      <a @click="downLoadTemplate">下载模版</a>
    </template>
  </upload-file>
</template>
<script>
export default {
  name: "configuration-shopConfig",
};
</script>
<script setup>
import CommonSearch from "@/components/commonSearch/index.vue";
import CommonTable from "@/components/commonTable/index.vue";
import { useSearchTable } from "@/hooks/table/useSearchTable";
import { ref } from "vue";
import { message } from "ant-design-vue";
import { modulePerm } from "@utils/modulePerm.js";
import AddForm from "@/views/upload/components/addForm.vue";
import EditForm from "@/views/upload/components/editForm.vue";
import {
  addShop,
  editShop,
  getShopList,
} from "@/api/configuration/shopConfig.js";
import { postFile } from "@utils/service/index.js";
import {
  addWarehouse,
  editWarehouse,
  getWarehouseList,
} from "@/api/configuration/warehose.js";
const { dataList, query, loading, page, search, reset, onPageChange } =
  useSearchTable({
    searchAPI: getWarehouseList,
    queryFactory: () => ({}),
  });
const upFile = ref();
const addRules = {
  warehouseId: [{ required: true, message: "请输入仓库id", trigger: "blur" }],
  zipcode: [{ required: true, message: "请输入邮编", trigger: "blur" }],
  warehouseCode: [
    { required: true, message: "请输入仓库编码", trigger: "blur" },
  ],
};

const columns = ref([
  {
    dataIndex: "warehouseId",
    title: "仓库id",
    align: "center",
    fieldType: "String",
    type: "input",
  },
  {
    dataIndex: "zipcode",
    title: "邮编",
    align: "center",
    fieldType: "String",
    type: "input",
  },
  {
    dataIndex: "warehouseCode",
    title: "仓库编码",
    align: "center",
    fieldType: "String",
  },
  {
    dataIndex: "createBy",
    title: "创建人",
    align: "center",
    fieldType: "String",
  },
  {
    dataIndex: "createTime",
    title: "创建时间",
    dict: "warehouse_data_type",
    align: "center",
    fieldType: "String",
    type: "select",
  },
  {
    dataIndex: "updateBy",
    title: "修改人",
    align: "center",
    fieldType: "String",
  },
  {
    dataIndex: "updateTime",
    title: "修改时间",
    dict: "warehouse_data_type",
    align: "center",
    fieldType: "String",
    type: "select",
  },
  {
    dataIndex: "isDelete",
    title: "停止更新",
    align: "center",
  },
  {
    dataIndex: "action",
    title: "操作",
    align: "center",
  },
]);
const formItems = ref([
  {
    label: "仓库id",
    type: "input",
    field: "warehouseId",
  },
  {
    label: "邮编",
    type: "input",
    field: "zipcode",
  },
  {
    label: "仓库编码",
    type: "input",
    field: "warehouseCode",
  },
]);
const editForm = ref(false);
const addForm = ref(false);
const formItem = ref([
  {
    label: "仓库id",
    value: "warehouseId",
    type: "input",
  },
  {
    label: "邮编",
    value: "zipcode",
    type: "input",
  },
  {
    label: "仓库编码",
    value: "warehouseCode",
    type: "input",
  },
  {
    label: "停止更新",
    value: "isDelete",
    type: "select",
    options: [
      { value: "N", label: "N" },
      { value: "Y", label: "Y" },
    ],
  },
]);
const baseData = ref({});
const showDetail = ref(false);
const cancel = () => {};

const imports = () => {
  upFile.value.handleShow();
};
const exportLoading = ref(false);
const exports = async () => {
  try {
    exportLoading.value = true;
    let obj = { ...query.value };
    const res = await postFile(
      "/config/wayfair/export_wayfair_warehouse",
      "post",
      obj,
      "wf仓库映射.xlsx"
    );
    message.success("导出成功");
  } catch (e) {
    message.error(e);
  } finally {
    exportLoading.value = false;
  }
};
const downLoadTemplate = async () => {
  try {
    await postFile(
      "/config/wayfair/get_wayfair_warehouse_tpl",
      "get",
      {},
      "获取wf仓库模板.xlsx"
    );
  } catch (e) {
    message.error(e);
  }
};

const add = () => {
  addForm.value = true;
};
const closeAdd = () => {
  addForm.value = false;
};
const handleEdit = (record) => {
  editForm.value = true;
  baseData.value = record;
};
const closeEdit = () => {
  editForm.value = false;
  showDetail.value = false;
};
const handleDetail = (record) => {
  editForm.value = true;
  baseData.value = record;
  showDetail.value = true;
};
/**
 * 新增
 * @param form
 * @returns {Promise<void>}
 */
const submitAdd = async (form) => {
  try {
    for (let formKey in form) {
      if (form[formKey] === undefined || form[formKey] === null) {
        form[formKey] = "";
      }
    }
    const res = await addWarehouse(form);
    message.success("新增成功");
    addForm.value = false;
    await search(page.value.pageNo);
  } catch (e) {
    message.error(e);
  }
};
/**
 * 编辑
 * @param form
 * @returns {Promise<void>}
 */
const submitEdit = async (form) => {
  try {
    for (let formKey in form) {
      if (form[formKey] === undefined || form[formKey] === null) {
        form[formKey] = "";
      }
    }
    form.id = baseData.value.id;
    const res = await editWarehouse(form);
    message.success("编辑成功");
    editForm.value = false;
    await search(page.value.pageNo);
  } catch (e) {
    message.error(e);
  } finally {
  }
};
</script>
<style scoped></style>
